<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <v-breadcrumbs :items="breadcrumbs">
      <template v-slot:divider>
        <v-icon>forward</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container class="v-container" fluid fill-height grid-list-md>
      <v-layout row wrap align-center>
        <span class="subheading">筛选</span>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-text-field label="文章名称" v-model="filter.title" @blur="getArticle"></v-text-field>
        </v-flex>
        <v-flex class="ml-4" d-flex xs12 sm6 md3 lg2>
          <v-select :items="[{id:-1,name:'全部'}].concat(articleType)" item-text="name" item-value="id" label="文章类型" v-model="filter.type" search-input @change="getArticle"></v-select>
        </v-flex>
        <v-flex xs12>
          <v-btn color="info" @click="newArticle">新增</v-btn>
          <v-btn color="warning" @click="$refs.table.deleteArticle()">删除</v-btn>
        </v-flex>
        <v-flex xs12>
          <article-table @edit="edit" ref="table" :title="filter.title" :type="filter.type"></article-table>
        </v-flex>
      </v-layout>
    </v-container>
    <article-dialog @update="getArticle" ref="dialog"/>
  </div>
</template>

<script>
import articleTable from './Table'
import articleDialog from './Dialog'
export default {
  name: 'Index',
  components: {
    articleTable,
    articleDialog
  },
  data: () => ({
    breadcrumbs: [
      {
        text: '文章',
        disabled: true
      }
    ],
    filter: {
      title: '',
      type: -1
    },
    articleType: [
      {
        id: 0,
        name: '知识视窗'
      },
      {
        id: 1,
        name: '校园体育'
      }
    ]
  }),
  methods: {
    getArticle () {
      this.$nextTick(function () {
        this.$refs.table.update()
      })
    },
    newArticle () {
      this.$refs.dialog.show('新建文章')
      this.$refs.dialog.clear()
    },
    edit (data) {
      this.$refs.dialog.show('修改文章')
      this.$refs.dialog.get(data)
    }
  },
  mounted () {
    // this.getArticle()
  }
}
</script>

<style scoped>

</style>
